<template>
  <div class="  container">
    <router-view></router-view>
    <div class="index">
      <Header />
      <div class="main-center2 " style="height: auto; margin-bottom:  0px;">
        <div class="test-con">
          <div class="test-con-list">
            <div class="test-tit">
              <label class="fl">{{questionInfo.name}}</label>
              <h1>答题时间：{{ questionInfo.time }}</h1>
            </div>
            <div class="test-c-area">
              <div class="test-left">
                <h3 class="dtk-tit">
                  答题卡
                  <label>总分：{{questionInfo.pointslimit}}</label>
                </h3>
                <div class="" style="height: 855px;overflow-y: auto;">
                  <div class="" v-for="(item, index) in info" :key="index">
                    <p class="bt2">{{ item.type }}</p>
                    <span class="ta" style="cursor: pointer;" v-for="(items, indexs) in item.list" :key="indexs">
                      <a class=" cur" v-if="items.res == 1" @click="changeCurrent(items.id)">{{ indexs + 1 }}</a>
                      <a class="error" v-else @click="changeCurrent(items.id)">{{ indexs + 1 }}</a>
                    </span>
                  </div>
                </div>
              </div>
              <div class="test-right" v-if="isShow == true">
                <div class="chengji">
                  <h3>成绩</h3>
                  <h4>共答{{ questionInfo.question_count }}道题，答对{{ questionInfo.right_count }}道题</h4>
                  <ul class="tx-tj">
                    <li>
                      <h1>
                        <img src="static/img/df.png" />
                        得分
                      </h1>
                      <p>{{ questionInfo.points }}/{{ questionInfo.pointslimit }}</p>
                    </li>
                    <li>
                      <h1>
                        <img src="static/img/rank.png" />
                        排名
                      </h1>
                      <p>{{ questionInfo.rank }}/{{ questionInfo.usercount }}</p>
                    </li>
                  </ul>

                  <h3 class="t-name">题型得分</h3>
                  <ul class="tx-df">
                    <li v-for="(item, index) in questionInfo.topic_type_sore">{{ item.typetext }}：{{ item.truenum }}/{{ item.num }}</li>
                  </ul>

                  <div class="h30"></div>
                  <div class="btn-see" @click="goNext()">查看解析</div>
                </div>
              </div>
              <div class="" v-for="(item, index) in testData" :key="index">
                <div class="test-right" v-if="index == current && isShow == false">
                  <h3 class="dtk-tit">
                    {{ item.typedata_text }}
                    <span v-if="item.typedata_text == '单选题'">（{{ first.sore }}分，共{{ first.list.length }}题）</span>
                    <span v-if="item.typedata_text == '多选题'">（{{ second.sore }}分，共{{ second.list.length }}题）</span>
                    <span v-if="item.typedata_text == '判断题'">（{{ third.sore }}分，共{{ third.list.length }}题）</span>
                    <span v-if="item.typedata_text == '填空题'">（{{ four.sore }}分，共{{ four.list.length }}题）</span>
                    <label>第{{ index + 1 }}题</label>
                  </h3>
                  <p class="k-tit">{{ item.title }}</p>
                  <div class="" v-for="(items, indexs) in item.options">
                    <el-radio-group @change="changeLable(item)" v-model="item.ans" v-if="item.typedata_text == '单选题'">
                      <P class="tt1">
                        <el-radio style="width: 400px;" :label="items.key" :disabled="true">{{ items.value }}</el-radio>
                      </P>
                    </el-radio-group>
                  </div>

                  <div class="" v-for="(items, indexs) in item.options">
                    <el-checkbox-group v-model="item.ans" v-if="item.typedata_text == '多选题'" @change="changeBox(item.id)">
                      <P class="tt1">
                        <el-checkbox :label="items.key" :disabled="true">{{ items.value }}</el-checkbox>
                      </P>
                    </el-checkbox-group>
                  </div>
                  <div class="" v-for="(items, indexs) in item.options">
                    <el-radio-group @change="changeLable(item)" v-model="item.ans" v-if="item.typedata_text == '判断题'">
                      <P class="tt1"><el-radio :disabled="true" label="1">对</el-radio></P>
                      <P class="tt1"><el-radio :disabled="true" label="0">错</el-radio></P>
                    </el-radio-group>
                  </div>
                  <div class="test-area" v-if="item.typedata_text == '填空题'">
                    <el-input v-model="item.ans" :disabled="true" @input="getInput(item)" type="textarea" placeholder="请输入您的答案" rows="8" show-word-limit></el-input>
                  </div>

                  <div class="mt90"></div>
                  <div class="mt10 ri-daan">
                    <!-- 单选多选 -->
                    <p class="k-tit" v-if="item.typedata_text == '单选题' || item.typedata_text == '多选题'">
                      正确答案：
                      <span v-for="(items, indexs) in item.options">
                        <span v-if="items.answer == 1">{{ items.key }}</span>
                      </span>
                    </p>
                    <p class="k-tit" v-if="item.typedata_text == '单选题' || item.typedata_text == '多选题'">你的答案：{{ item.ans.toString() }}</p>


                    <!-- 判断题 -->
                    <p class="k-tit" v-if="item.typedata_text == '判断题'">
                      正确答案：
                      <span v-if="item.judgedata == '1'">
                        对
                        </span>
                        <span v-if="item.judgedata == 0">错</span>
                      
                    </p>
                    <p class="k-tit" v-if="item.typedata_text == '判断题'">
                      你的答案：
                      <span v-if="item.ans == '1'">
                        对
                           </span>
                        <span v-if="item.ans == '0'">错</span>
                   
                    </p>
                    <!-- 填空题 -->
                   <p class="k-tit" v-if="item.typedata_text == '填空题'">
                     正确答案：
                     <span v-for="(items, indexs) in item.options">
                       <span v-if="items.answer == 1">{{ items.value }}</span>
                     </span>
                   </p>
                   <p class="k-tit" v-if="item.typedata_text == '填空题'">你的答案：{{item.ans}}</p>
                    <!-- 解析 -->
                    <p class="k-tit">解析：{{ item.answercontent }}</p>
                  </div>
                  <div class="mt30"></div>
                  <!-- <div class="mt10 baseAct txt-l">
                    <button class="sure" type="info" v-if="current > 0" @click="goBackQestion()">上一题</button>
                    <button @click="goNextQestion()" v-if="current < testData.length - 1" class="sure">下一题</button>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from '../../components/header.vue';
import Copyright from '../../components/copyright2.vue';

export default {
  data() {
    return {
      isLeft: false,
      id: '',
      token: localStorage.getItem('token'),
      info: '', //试卷答题卡
      typeCurrent: '', //试卷题型
      testData: [], //试卷所有考题
      first: '', //单选
      second: '', //多选
      third: '', //判断
      four: '', //填空
      current: 0, //第几题
      questionInfo: '', //答卷信息
      isShow: true //false显示解析 true答题卡
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.getInfo();
    this.getTestInfo();
  },
  methods: {
    goBackQestion() {
      if (this.current > 0) {
        this.current--;
        this.testData.forEach((item, index) => {
          if (this.current == index) {
            this.typeCurrent = item.id;
          }
        });
      }
    },
    goNextQestion() {
      if (this.current < this.testData.length) {
        this.current++;
        this.testData.forEach((item, index) => {
          if (this.current == index) {
            this.typeCurrent = item.id;
          }
        });
      }
    },
    //获取答题卡信息
    getInfo(id) {
      this.$api('getCourseList.getWxTopicCardList', { token: this.token, id: this.id, check: 1 }).then(res => {
        this.info = res.data;
        for (let item in this.info) {
          this.info[item].list.forEach((items, indexs) => {
            // if (items.typedata_text == '多选题') {
            //   items.ans = items.ans.split('');
            // }
            this.testData.push(items);
          });
        }
        this.first = this.info[1];
        this.second = this.info[2];
        this.third = this.info[3];
        this.four = this.info[4];
        this.typeCurrent = this.testData[0].id;
      });
    },
    //答题卡点击
    changeCurrent(id) {
      this.typeCurrent = id;
      this.testData.forEach((item, index) => {
        if (item.id == id) {
          this.current = index;
        }
      });
    },
    //获取成绩信息
    getTestInfo(id) {
      this.$api('getCourseList.analysis', { token: this.token, id: this.id }).then(res => {
        console.log(res);
        this.questionInfo = res.data;
      });
    },
    goNext() {
      this.isShow = false;
      // this.$router.push('/test3');
    },
    goJG() {
      this.$router.push('/courseList');
    },
    goCollect() {
      this.$router.push('/courseCollect');
    }
  },
  components: { Header, Copyright }
};
</script>

<style lang="scss" scoped>
/deep/ .el-input__inner {
  height: 36px;
  line-height: 35px;
  outline: 0;
}
</style>
